<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>评价页</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			body {
			}
			#main {
				padding: 23px 15px 0;
			}
			.m-l {
				margin-left: 15px;
			}
			.evaluate-title {
				text-align: center;
				padding: 0 0 15px;
				color: #969696;
				font-size: 14px;
			}
			.input-evaluate-container {
				border: #C2C2C2 1px solid;
				border-radius: 5px;
			}
			.input-evaluate-container > div:nth-child(1) {
				padding: 11px;
			}
			.input-evaluate-container > div:nth-child(2) {
				padding: 10px;
			}
			.input-evaluate-grade {
				border-bottom: #C2C2C2 1px solid;
			}
			#input-evaluate {
				min-height: 70px;
				outline: none;
				width: 100%;
				overflow-y: visible;
				word-wrap: break-word;
			}
			#input-compldescribe-words-n {
				text-align: right;
			}
			#input-compldescribe-words-n:after {
				content: "/300字";
				color: rgba(153,153,153,153);
			}
			.btn-commit-container {
				margin-top: 17.5px;
				text-align: center;
			}
			#btn-commit {
				width: 80px;
				height: 29px;
				line-height: 29px;
				background-color: #ef8633;
				color: #fff;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-between flex-center-v">
				<div class="back-pre-pg top-nav-left icon-arrow-left"></div>
				<div>
					评价
				</div>
				<div class="top-nav-right"></div>
			</div>
		</header>
		<div id="main">
			<div class="evaluate-title">
				感谢你的支持，给我们的技术员评价吧！
			</div>
			<div class="input-evaluate-container">
				<div class="input-evaluate-grade flex-container flex-center-v">
					<div>
						<nobr>报障评分：</nobr>
					</div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
					<div class="m-l icon-xx icon-xx-n"></div>
				</div>
				<div>
					<textarea id="input-evaluate" placeHolder="请输入报障详情" maxlength="300"></textarea>
					<div id="input-compldescribe-words-n">
						0
					</div>
				</div>
			</div>
			<div class="btn-commit-container">
				<button id="btn-commit">
					提交
				</button>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/request.js"></script>
	<script type="text/javascript">
		//故障id
		var mCpId;
		//评分
		var mGrade = 0;
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			initData();
			initView();
		};
		function initData() {
			mCpId = api.pageParam.id;
		}

		function initView() {
			var doc = document;
			var btnCommit = doc.getElementById('btn-commit');
			var msg = doc.getElementById('input-evaluate');
			var wordsN = doc.getElementById('input-compldescribe-words-n');
			msg.onkeyup = function() {
				wordsN.innerText = msg.value.length;
			}
			btnCommit.onclick = function() {
				requestEvaluate(mCpId, mGrade, msg.value);
			}
			setGradeView(doc);
			MyCom.backPrePg();
		}

		/**
		 * 设置评分的逻辑变化
		 */
		function setGradeView(doc) {
			var xxVs = doc.getElementsByClassName('icon-xx');
			var i = 0;
			var j;
			var index = 0;
			for (; i < xxVs.length; i++) {
				xxVs[i].onclick = function() {
					mGrade = 0;
					//设置点击的星星的下标默认为最大值
					index = xxVs.length - 1;
					for ( j = 0; j < xxVs.length; j++) {
						//判断点击的是哪个星星，保留下标
						if (this == xxVs[j]) {
							index = j;
						}
						//如果j小于点击的星星的下标，那么就设置为选中状态，反之，设置为非选中状态。
						if (j <= index) {
							xxVs[j].className = 'm-l icon-xx icon-xx-s';
							mGrade++;
						} else {
							xxVs[j].className = 'm-l icon-xx icon-xx-n';
						}
					}
				}
			}
		}

		/**
		 * 打开评价成功页面
		 */
		function openESPg() {
			api.openWin({
				name : 'evaluate_succeed',
				url : './evaluate_succeed.html',
				pageParam : api.pageParam
			});
		}

		/**
		 * 请求服务器：提交评价
		 * @param{Number} cpid - 故障id
		 * @param{Number} point - 分数
		 * @param{String} advise - 建议
		 */
		function requestEvaluate(cpid, point, advise) {
			if (point == 0) {
				api.toast({
					msg : '请选择报障评分'
				});
				return;
			}
			api.showProgress({
			});
			var data = {
				values : {
					'id' : cpid,
					'point' : point,
					'advise' : advise
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_EVALUATE;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					var code = re.code;
					if (code == 1) {
						openESPg();
						triggerReloadCpDListener(point);
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					api.toast({
						msg : '服务器异常'
					});
				}
			});
		}

		/**
		 * 触发重新刷新报障详情的监听。以及刷新列表item
		 */
		function triggerReloadCpDListener(point) {
			api.sendEvent({
				name : 'StatusChangeListener',
				extra : {
					'point' : point
				}
			});
			api.sendEvent({
				name : 'ReloadCpDListener'
			});
		}
	</script>
</html>
